<template>
  <!-- 主题设置页面 -->
  <div>
    <!-- 系统主题设置卡片 -->
    <el-card class="mgb20" shadow="hover">
      <template #header>
        <div class="content-title">系统主题</div>
      </template>
      <!-- 系统主题选择列表 -->
      <div class="theme-list mgb20">
        <div
          class="theme-item"
          @click="setSystemTheme(item)"
          v-for="item in system"
          :style="{ backgroundColor: item.color, color: '#fff' }"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 重置系统主题按钮 -->
      <div class="flex-center">
        <el-button @click="resetSystemTheme">重置主题</el-button>
      </div>
    </el-card>

    <!-- Element-Plus主题设置卡片 -->
    <el-card class="mgb20" shadow="hover">
      <template #header>
        <div class="content-title">Element-Plus主题</div>
      </template>
      <!-- Element主题颜色设置列表 -->
      <div class="theme-list mgb20">
        <div class="theme-item" v-for="theme in themes">
          <!-- 显示主题按钮和颜色值 -->
          <el-button :type="theme.name">{{ theme.name }}</el-button>
          <div class="theme-color">{{ theme.color }}</div>
          <!-- 颜色选择器，用于修改主题色 -->
          <el-color-picker v-model="color[theme.name]" @change="changeColor(theme.name)" />
        </div>
      </div>
      <!-- 重置Element主题按钮 -->
      <div class="flex-center">
        <el-button @click="resetTheme">重置主题</el-button>
      </div>
    </el-card>

    <!-- 头部和菜单主题设置 -->
    <el-row :gutter="50">
      <!-- 头部主题设置 -->
      <el-col :span="12">
        <el-card class="mgb20" shadow="hover" :body-style="{ height: '250px' }">
          <template #header>
            <div class="content-title">头部主题</div>
          </template>
          <div class="theme-list mgb20">
            <!-- 头部背景颜色设置 -->
            <div class="theme-item">
              <el-button :color="color.headerBgColor">背景颜色</el-button>
              <div class="theme-color">{{ color.headerBgColor }}</div>
              <el-color-picker
                v-model="color.headerBgColor"
                @change="themeStore.setHeaderBgColor(color.headerBgColor)"
              />
            </div>
            <!-- 头部文字颜色设置 -->
            <div class="theme-item">
              <el-button :color="color.headerTextColor">文字颜色</el-button>
              <div class="theme-color">{{ color.headerTextColor }}</div>
              <el-color-picker
                v-model="color.headerTextColor"
                @change="themeStore.setHeaderTextColor(color.headerTextColor)"
              />
            </div>
          </div>
          <!-- 重置头部主题按钮 -->
          <div class="flex-center">
            <el-button @click="resetHeader">重置主题</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 菜单主题设置 -->
      <el-col :span="12">
        <el-card class="mgb20" shadow="hover" :body-style="{ height: '250px' }">
          <template #header>
            <div class="content-title">菜单主题</div>
          </template>
          <div class="theme-list mgb20">
            <!-- 菜单背景颜色设置 -->
            <div class="theme-item">
              <el-button :color="sidebar.bgColor">背景颜色</el-button>
              <div class="theme-color">{{ sidebar.bgColor }}</div>
              <el-color-picker
                v-model="sidebarColor.bgColor"
                @change="sidebar.setBgColor(sidebarColor.bgColor)"
              />
            </div>
            <!-- 菜单文字颜色设置 -->
            <div class="theme-item">
              <el-button :color="sidebar.textColor">文字颜色</el-button>
              <div class="theme-color">{{ sidebar.textColor }}</div>
              <el-color-picker
                v-model="sidebarColor.textColor"
                @change="sidebar.setTextColor(sidebarColor.textColor)"
              />
            </div>
          </div>
          <!-- 重置菜单主题按钮 -->
          <div class="flex-center">
            <el-button @click="resetSidebar">重置主题</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 导入侧边栏和主题状态管理store
import { useSidebarStore } from '@/store/slidebar';
import { useThemeStore } from '@/store/theme';
import { reactive } from 'vue';

// 初始化主题和侧边栏store实例
const themeStore = useThemeStore();
const sidebar = useSidebarStore();

// 定义响应式的主题颜色对象，包含Element Plus主题色和头部颜色
const color = reactive({
  primary: localStorage.getItem('theme-primary') || '#409eff', // 主要颜色
  success: localStorage.getItem('theme-success') || '#67c23a', // 成功颜色
  warning: localStorage.getItem('theme-warning') || '#e6a23c', // 警告颜色
  danger: localStorage.getItem('theme-danger') || '#f56c6c', // 危险颜色
  info: localStorage.getItem('theme-info') || '#909399', // 信息颜色
  headerBgColor: themeStore.headerBgColor, // 头部背景色
  headerTextColor: themeStore.headerTextColor, // 头部文字色
});

// 定义响应式的侧边栏颜色对象
const sidebarColor = reactive({
  bgColor: sidebar.bgColor, // 侧边栏背景色
  textColor: sidebar.textColor, // 侧边栏文字色
});

// Element Plus主题配置数组，使用 as const 确保类型安全
const themes = [
  {
    name: 'primary' as const,
    color: themeStore.primary || color.primary,
  },
  {
    name: 'success' as const,
    color: themeStore.success || color.success,
  },
  {
    name: 'warning' as const,
    color: themeStore.warning || color.warning,
  },
  {
    name: 'danger' as const,
    color: themeStore.danger || color.danger,
  },
  {
    name: 'info' as const,
    color: themeStore.info || color.info,
  },
];

// 改变Element Plus主题颜色的方法
const changeColor = (name: 'primary' | 'success' | 'warning' | 'danger' | 'info') => {
  themeStore.setPropertyColor(color[name], name);
};

// 重置Element Plus主题
const resetTheme = () => {
  themeStore.resetTheme();
};

// 重置头部主题
const resetHeader = () => {
  localStorage.removeItem('header-bg-color');
  localStorage.removeItem('header-text-color');
  location.reload();
};

// 重置侧边栏主题
const resetSidebar = () => {
  localStorage.removeItem('sidebar-bg-color');
  localStorage.removeItem('sidebar-text-color');
  location.reload();
};

// 系统主题配置数组
const system = [
  {
    name: '默认',
    color: '#242f42',
  },
  {
    name: '健康',
    color: '#1ABC9C',
  },
  {
    name: '优雅',
    color: '#722ed1',
  },
  {
    name: '热情',
    color: '#f44336',
  },
  {
    name: '宁静',
    color: '#00bcd4',
  },
];

// 设置系统主题的方法
const setSystemTheme = (data: any) => {
  if (data.name === '默认') {
    resetSystemTheme();
    return;
  }
  // 设置头部和侧边栏主题颜色
  themeStore.setHeaderBgColor(data.color);
  themeStore.setHeaderTextColor('#fff');
  sidebar.setBgColor('#fff');
  sidebar.setTextColor('#5b6e88');
  // 设置主要主题色
  themeStore.setPropertyColor(data.color, 'primary');
};

// 重置所有系统主题
const resetSystemTheme = () => {
  resetTheme();
  resetHeader();
  resetSidebar();
};
</script>

<style scoped>
/* 主题列表样式 */
.theme-list {
  display: flex;
  justify-content: center;
}

/* 单个主题项样式 */
.theme-item {
  margin-right: 20px;
  padding: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
}

/* 主题颜色显示样式 */
.theme-color {
  color: #787878;
  margin: 20px 0;
}
</style>

```
